<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 500px;
				height: 50px;
				margin: 0 auto;
				position: relative;
				text-align: center;
			}
			*{
				margin: 0;
				padding: 0;
			}
			#box p{
				width: 80px;
				float: left;
				/*margin-right: 10px;*/
				cursor: pointer;
				
			}
			#xian{
				width: 80px;
				height: 2px;
				background: forestgreen;
				position: absolute;
				top: 30px;
			}
		</style>
		<script type="text/javascript" src="js/tween.js">
			
		</script>
	</head>
	<body>
		<div id="box">
			<p>按钮一</p>
			<p>按钮二</p>
			<p>按钮三</p>
			<p>按钮四</p>
			<p>按钮五</p>
			<div id="xian">
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var ppp = document.getElementsByTagName("p");
		var xian = document.getElementById("xian");
			for(var i = 0;i < ppp.length;i++){
				ppp[i].index = i;
				ppp[i].onmouseover = function(){
					clearInterval(timer);
					move(this.index);
				}
			}
		var timer = null;
		function move(index){
			var t = 0;
			var b = xian.offsetLeft;
			var c = index*80-xian.offsetLeft;
			var d = 10;
			timer = setInterval(function(){
				t++;
				if(t >= d){
					clearInterval(timer);
				}
				xian.style.left = Tween.Linear(t,b,c,d)+"px";
			},30)			
		}
	</script>
</html>